<template>
    <div class="draw-wrapper" v-show="show">
        <div class="navigate-wrapper" @mouseleave="isLeave">
            <div class="content" v-if="active == 1">
                <div class="main-list">
                    <ul>
                        <li v-for="item in navs" :key="item.id" @mouseenter="getGoods(item.id)">{{ item.name }}</li>
                    </ul>
                </div>
                <div class="sub-list">
                    <div class="ivu-row cateBox">
                        <el-row :gutter="20">
                            <el-col :span="4" v-for="item in goodList" :key="item.id">
                                <div class="grid-content" @click="$navTo('/home/product?id='+item.cate_id)">
                                    <div class="img" :style="{'background-image':`url(${item.cover})`}">
                                        <!-- <img :src="item.cover" alt=""> -->
                                    </div>
                                    <p class="name">{{ item.goods_name }}</p>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
            <div class="content rooms_box" v-else-if="active ==2 || active ==3">
                <div class="sub-list">
                    <div class="ivu-row">
                        <div class="row">
                            <div class="col" v-for="(item,index) in anliList" :key="index" @click="$navTo('/home/exhibit?id='+item.id)">
                                <div class="grid-content">
                                    <div class="img" :style="{'background-image':`url(http://tianwei888.oss-cn-beijing.aliyuncs.com${item.icon})`}">
                                        <!-- <img :src="'http://tianwei888.oss-cn-beijing.aliyuncs.com' + item.icon"  alt=""> -->
                                    </div>
                                    <p class="name">{{item.name}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content rooms_box" v-else-if="active ==4">
                <div class="sub-list">
                    <div class="ivu-row">
                        <div class="row">
                            <div class="col-25 col" v-for="(item,index) in serviceList" :key="index" @click="toUrl(item)">
                                <div class="grid-content">
                                    <div class="img" :style="{'background-image':`url(http://tianwei888.oss-cn-beijing.aliyuncs.com${item.icon})`}">
                                        <!-- <img :src="'http://tianwei888.oss-cn-beijing.aliyuncs.com' + item.icon" alt=""> -->
                                    </div>
                                    <p class="name">{{ item.name }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import request from '../../../utils/request'

export default {
    data() {
        return {
            reserveList: [
                {name: '设计', url: ""},
                {name: '测量', url: ""},
                {name: '定制', url: ""},
                {name: '安装', url: ""},
            ],
            navs: [],
            goodList: [],
            anliList:[],
            serviceList:[]
        }
    },
    created: function () {
        request.post('goods/getCategory').then(res => {
            this.navs = res.data
            this.getGoods(res.data[0].id)
        })
        this.getAnli()
        this.getService()
    },
    props: {
        show: {
            type: Boolean,
            default: false,
        },
        active: {
            type: Number,
            default: 0,
        }
    },
    methods: {
        isLeave() {
            this.$emit("isLeave", false)
        },
        toUrl(item) {
            var url = item.name == '设计' ? "/reserve" : "/service"
            this.$router.push(url + "?id=" +item.id);
            this.$emit("isLeave", false)
        },
        getGoods(cate_id) {
            request.post('/goods/getGoodsList', {cate_id, page: 1, number: 20}).then(res => {
                this.goodList = res.data.data
            })
        },
        getAnli(){
            request.post('/article/getArticleCategory',{pid:1}).then(res=>{
                this.anliList = res.data
            })
        },
        getService(){
            request.post('/article/getArticleCategory',{pid:5}).then(res=>{
                this.serviceList = res.data
            })
        }
    },
}
</script>
<style lang="scss" scoped>
.draw-wrapper {
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 56px;
    background: rgba($color: #000000, $alpha: 0.5);

    .navigate-wrapper {
        background-color: #fff;
        max-height: 560px;
        overflow: hidden;
        z-index: 1002;
        box-sizing: border-box;
        border-top: 1px solid #f5f5f5;

        .content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            height: 100%;

            .main-list {
                flex: 0 0 180px;
                height: 560px;
                box-sizing: border-box;
                border-right: 1px solid #eee;
                overflow: hidden;

                ul {
                    overflow-y: auto;
                    height: 100%;
                    margin-right: -20px;
                    padding-right: 20px;

                    li {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        padding: 14px 0 13px 10px;
                        font-weight: 700;
                        color: #111;
                        cursor: pointer;

                        &:hover {
                            color: #0058a3;
                        }
                    }
                }
            }

            .sub-list {
                max-height: 560px;
                flex: 1 1 auto;
                position: relative;
                overflow: hidden;

                .ivu-row {
                    overflow-y: auto;
                    height: 100%;
                    margin-right: -20px;
                    padding-right: 20px;
                    padding-top: 15px;
                    padding-left: 15px;
                    padding-bottom: 20px;
                    box-sizing: border-box;
                    max-height: 560px;
                    // display: flex;
                    &.cateBox{
                        .grid-content {
                            .img{
                                height: 100px;
                            }
                        }
                        
                    }
                    flex-wrap: wrap;
                    align-items: flex-start;
                    align-content: flex-start;

                    .row {
                        font-size: 0;
                        text-align: center;

                        .col {
                            width: 20%;
                            display: inline-block;
                            box-sizing: border-box;
                            vertical-align: top;

                            &.col-25 {
                                width: 23%;
                            }
                        }

                    }

                    .grid-content {
                        text-align: center;
                        padding: 7px 23.5px;
                        cursor: pointer;

                        &:hover {
                            background: #eee;

                        }

                        .img {
                            width: 100%;
                            height: 200px;
                            background-repeat: no-repeat;
                            background-position: center center;
                            background-size: cover;
                            // height: auto;
                            margin-bottom: 5px;

                            // img {
                            //     width: 100%;
                            //     height: 100%;
                            // }
                        }

                        .name {
                            font-size: 14px;
                            margin: 0;
                            color: #444;
                            transition: all 0.3s;
                        }
                    }

                }
            }
        }

        .rooms_box {
            .sub-list {
                .ivu-row {
                    padding-left: 0;

                    .row {
                        display: flex;
                        flex-wrap: wrap;

                        .col {
                            width: calc(20% - 12px);
                            margin-right: 15px;

                            &:nth-child(5n) {
                                margin-right: 0;
                            }

                            .grid-content {
                                padding: 0;

                                &:hover {
                                    background: none;

                                    .name {
                                        background: #0058a3;
                                        color: #fff;
                                    }
                                }
                            }

                            .name {
                                height: 40px;
                                line-height: 40px;
                                background: #eee;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>